<template>
	<view class="checkbox" :style="{ width: width + 'rpx', height: width + 'rpx', border: `1rpx solid ${borderColor}`, padding: width * 0.2 + 'rpx' }" @click="change">
		<view class="checkbox_a" v-show="value" :style="{ backgroundColor: color }"></view>
	</view>
</template>

<script>
	export default {
		props: {
			checked: {
				type: Boolean,
				default: false
			},
			width: {
				type: Number,
				default: 20
			},
			borderColor: {
				type: String,
				default: '#ccc'
			},
			color: {
				type: String,
				default: '#ccc'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				value: false
			}
		},
		created() {
			this.value = this.checked
		},
		watch: {
			checked(newVal) {
				this.value = newVal
			}
		},
		methods: {
			change() {
				if(this.disabled) return
				const flag = !this.value
				this.value = flag
				this.$emit('change', flag)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox {
		border-radius: 50%;
		display: inline-block;
		.checkbox_a {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
</style>